<template>
	<view class="follow">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar title="我的关注" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
			</template>
			<view class="content">
				<uv-cell-group :border="false" class="cell-box" v-for="(item,index) in dataList" :key="index">
					<uv-cell>
						<template #title>
							<view class="flex align-center">
								<uv-avatar :src="item.follow_avatar" size="30" />
								<uv-text :text="item.follow_nickname" :color="color_red" style="margin-left: 20rpx;" />
							</view>
						</template>
						<template #value>
							<uv-tags 
								class="tags" icon="checkmark" 
								text="已关注" shape="circle" color="#595757"
								borderColor="#B4B4B5" bgColor="#FFFFFF" @click="open(item)"  
							/>
						</template>
					</uv-cell>
				</uv-cell-group>
			</view>
		</z-paging>
		
		<uv-popup ref="popupRef" mode="bottom" round="20">
			<view class="popup-content">
				<uv-gap height="10" bgColor="transparent" />
				<uv-text text="取消关注" :color="color_red" align="center" @click="unFollowUser"/>
				<uv-gap height="20" bgColor="transparent" />
				<uv-button 
					@click="close" text="取消"
					shape="circle" color="#F6F6F6" 
					customStyle="color: '#333333'" 
				/>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
    import { setFollowUser,getFollow } from '@/api';
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
	const color_red = uni.$config.color.red
	const selfFollowUserId = ref(0)
	const popupRef = ref(null)
	const open = (item) => {
		selfFollowUserId.value = item.follow_user_id
        popupRef.value.open()
	}
	const close = () => popupRef.value.close()
	
	const unFollowUser = async () => {
		let param = {}
		param.follow_user_id = selfFollowUserId.value;
		param.status = 0;
		const result = await setFollowUser(param)
		if (result.code == 200) {
			uni.$uv.toast('取消关注成功')
			paging.value.reload();
			popupRef.value.close()
		}
	}
	const paging = ref(null)
	const dataList = ref([])
	const queryList = (pageNo, pageSize) => {
	        getFollow({ page:pageNo,limit:pageSize }).then(res => {
			    paging.value.complete(res.result.data);
			}).catch(res => {
				paging.value.complete(false);
			})
	}
	
	
	
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
	.follow{
		:deep(.uv-status-bar){
			background-image: none !important;
			background-color: #EAA8AD !important;
		}
		.content {
			background-color: #EFEFEF;
			margin-top: 20rpx;
			.cell-box{
				background-color: #fff;
			}
			
		}
	}
	.tags {
		:deep(.uv-icon__icon) {
			color: #595757 !important;
		}
	}
	.popup-content {
		padding: 30rpx;
	}
</style>